import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Dimensions,
} from 'react-native';

// import {ProposalEntry} from '../../components/index';
import {proposalList} from '../../api/index';
let heightScreen = Dimensions.get('window').height;
let widthScreen = Dimensions.get('window').width;
let typeColor1 = '#9966FF';
let typeColor2 = '#9966FF';
let data = [
  {
    title: 'mgl 发起的提案',
    info: 'aaaaaaaaaaaaaaaaaaaaa',
    person: 'mgl',
    stageResult: 'success',
    success: 1,
  },
  {
    title: 'mgl 发起的提案',
    info: 'aaaaaaaaaaaaaaaaaaaaa',
    person: 'mgl',
    stageResult: 'success',
    success: 1,
  },
  {
    title: 'mgl 发起的提案',
    info: 'aaaaaaaaaaaaaaaaaaaaa',
    person: 'mgl',
    stageResult: 'lose',
    success: 0,
  },
];
export default class History extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      successList: [],
      loseList: [],
      isLoading: true,
    };
  }

  async getInfo(finish) {
    const result = await proposalList({finish: finish});
    if (finish === 2) {
      this.setState({
        successList: result.data,
      });
    } else {
      this.setState({
        loseList: result.data,
      });
    }
  }
  componentDidMount(): void {
    this.getInfo(2);
    this.getInfo(0);
  }

  loadProposalEntry() {
    let arr = [];
    // let color = data[i].success === 1 ? '#3399FF' : '#666666';
    let successList = this.state.successList;
    let loseList = this.state.loseList;
    try {
      for (let i = 0; i < successList.length; i++) {
        arr.push(
          <ProposalEntry
            title={successList[i].title}
            info={successList[i].info}
            name={successList[i].name}
            stageResult={'执行成功'}
            color={'#3399FF'}
            onPressFunc={() => {
              this.props.navigation.navigate('ProposalInformation', {
                id: successList[i].id,
              });
            }}
          />,
        );
      }
      for (let i = 0; i < loseList.length; i++) {
        arr.push(
          <ProposalEntry
            title={loseList[i].title}
            info={loseList[i].info}
            name={loseList[i].name}
            stageResult={'执行失败'}
            color={'#666666'}
            onPressFunc={() => {
              this.props.navigation.navigate('ProposalDetail', {
                id: loseList[i].id,
              });
            }}
          />,
        );
      }
    } catch (e) {}

    return arr;
  }

  render() {
    return <View>{this.loadProposalEntry()}</View>;
  }
}
class ProposalEntry extends Component {
  static defaultProps = {
    title: '提案列表',
    type: 3,
  };

  constructor(props) {
    super(props);
  }

  //TODO:render
  render() {
    const {onPressFunc} = this.props;
    return (
      <TouchableOpacity onPress={() => onPressFunc()}>
        <View
          style={{height: heightScreen * 0.096, backgroundColor: '#FFFFFF'}}>
          <View style={{flexDirection: 'row'}}>
            <View
              style={{
                marginTop: heightScreen * 0.008,
                marginLeft: heightScreen * 0.03,
                width: heightScreen * 0.01,
                height: heightScreen * 0.033,
                backgroundColor: this.props.color,
              }}
            />
            <View>
              <Text style={proposalEntryStyle.title}>{this.props.title}</Text>
              <View
                style={{
                  marginLeft: heightScreen * 0.007,
                  height: 0.5,
                  width: heightScreen * 0.311,
                  backgroundColor: this.props.color,
                }}
              />
              <Text style={proposalEntryStyle.text1}>
                提案人：{this.props.name}
              </Text>
              <Text style={proposalEntryStyle.text2}>
                提案时间：{this.props.create_time}
              </Text>
            </View>
            <Text
              style={{
                textAlign: 'right',
                color: this.props.color,
                fontSize: heightScreen * 0.019,
                //fontFamily: 'MicrosoftYaHei',
                marginTop: heightScreen * 0.014,
                width: 375 * 0.22,
                marginRight: 5,
              }}>
              {this.props.stageResult}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}

//TODO:style

let proposalEntryStyle = StyleSheet.create({
  rect: {
    marginTop: heightScreen * 0.008,
    marginLeft: heightScreen * 0.03,
    width: heightScreen * 0.01,
    height: heightScreen * 0.033,
    backgroundColor: typeColor1,
  },
  line: {
    marginLeft: heightScreen * 0.007,
    height: 0.5,
    width: heightScreen * 0.311,
    backgroundColor: typeColor1,
  },
  title: {
    marginTop: heightScreen * 0.006,
    marginBottom: heightScreen * 0.002,
    marginLeft: heightScreen * 0.006,
    fontSize: heightScreen * 0.024,
    color: '#000000',
    //fontFamily: 'MicrosoftYaHei',
    fontWeight: '400',
  },
  colorTitle: {
    textAlign: 'right',
    color: typeColor2,
    fontSize: heightScreen * 0.019,
    //fontFamily: 'MicrosoftYaHei',
    marginTop: heightScreen * 0.014,
    width: widthScreen * 0.27,
  },
  text1: {
    marginLeft: heightScreen * 0.006,
    fontSize: heightScreen * 0.018,
    //fontFamily: 'MicrosoftYaHei',
    color: '#666666',
    marginTop: heightScreen * 0.005,
  },
  text2: {
    marginLeft: heightScreen * 0.006,
    fontSize: heightScreen * 0.018,
    //fontFamily: 'MicrosoftYaHei',
    color: '#666666',
  },
});
